import EChartsReact from "echarts-for-react";
import TitleBar from "../../components/titleBar";
import * as echarts from 'echarts'
import "./index.css";
import {
  BarChartOutlined,
  RiseOutlined,
  PieChartOutlined,
  WarningFilled,
  InfoCircleFilled,
  SettingFilled,
  MoreOutlined,
} from "@ant-design/icons";
import { useEffect, useRef, useState } from "react";
function History() {
  let [changeEc, setEc] = useState([
    { id: 1, icon: BarChartOutlined },
    { id: 2, icon: RiseOutlined },
    { id: 3, icon: PieChartOutlined },
  ]);
  let [changeDate, setDate] = useState([
    { id: 1, title: "日" },
    { id: 2, title: "周" },
    { id: 3, title: "月" },
    { id: 4, title: "年" },
  ]);
  let [nowid, setNoid] = useState(0);
  let [dateid, setdateid] = useState(0);
  const echartsRef = useRef<any>(null);
  const echartsRef2 = useRef<any>(null);
  function changeAc(index: number) {
    setNoid(index);
    if (echartsRef.current) {
      let echartsInstance = echartsRef.current.getEchartsInstance();
      setTimeout(() => {
        echartsInstance.setOption(opLs[index][dateid], true);
      }, 0);
    }
  }
  function changedateid(index: number) {
    setdateid(index);
    console.log(nowid, index);
    if (nowid === 2) {
      if (echartsRef.current && echartsRef2.current) {
        let echartsInstance = echartsRef.current.getEchartsInstance();
        let echartsInstance2 = echartsRef2.current.getEchartsInstance();
        setTimeout(function () {
          echartsInstance.setOption(opLs[nowid][index][0], true);
          echartsInstance2.setOption(opLs[nowid][index][1], true);
        }, 0);
      }
    } else {
      if (echartsRef.current) {
        let echartsInstance = echartsRef.current.getEchartsInstance();
        setTimeout(() => {
          echartsInstance.setOption(opLs[nowid][index], true);
        }, 0);
      }
    }
    // setoptions(opLs[nowid][index]);
  }
  //   图表数据
  let [options, setoptions] = useState<any>({
    tooltip: {
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "25",
      right: "25",
      bottom: "20",
      top: "20",
      //   containLabel: true,
    },
    xAxis: {
      type: "category",
      data: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日",
      ],
    },
    yAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
      //   scale: true,
      splitLine: {
        show: true,
        lineStyle: {
          type: "soild",
          color: "#242e42",
        },
      },
    },
    series: [
      {
        name: "蓝条",
        type: "bar",
        data: [15, 5, 17, 20, 14, 5, 14],
        barWidth: "10",
        color: "#1f8efa",
      },
      {
        name: "黄条",
        type: "bar",
        data: [16, 21, 15, 24, 16, 32, 10],
        barWidth: "10",
        color: "#ffab4f",
      },
      {
        name: "绿条",
        type: "bar",
        data: [7, 28, 6, 12, 30, 8, 5],
        barWidth: "10",
        color: "#05c985",
      },
    ],
  });

  let [opLs, setOpLs] = useState<any>([
    [
      {
        tooltip: {
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "25",
          right: "25",
          bottom: "25",
          top: "20",
          //   containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
            "星期日",
          ],
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          //   scale: true,
          splitLine: {
            show: true,
            lineStyle: {
              type: "soild",
              color: "#242e42",
            },
          },
        },
        series: [
          {
            name: "蓝条",
            type: "bar",
            data: [15, 5, 17, 20, 14, 5, 14],
            barWidth: "10",
            color: "#1f8efa",
          },
          {
            name: "黄条",
            type: "bar",
            data: [16, 21, 15, 24, 16, 32, 10],
            barWidth: "10",
            color: "#ffab4f",
          },
          {
            name: "绿条",
            type: "bar",
            data: [7, 28, 6, 12, 30, 8, 5],
            barWidth: "10",
            color: "#05c985",
          },
        ],
      },
      {
        tooltip: {
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "25",
          right: "25",
          bottom: "25",
          top: "20",
          //   containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
            "星期日",
          ],
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          //   scale: true,
          splitLine: {
            show: true,
            lineStyle: {
              type: "soild",
              color: "#242e42",
            },
          },
        },
        series: [
          {
            name: "蓝条",
            type: "bar",
            data: [15, 5, 17, 20, 14, 5, 14],
            barWidth: "10",
            color: "#1f8efa",
          },
          {
            name: "黄条",
            type: "bar",
            data: [16, 21, 15, 24, 16, 32, 10],
            barWidth: "10",
            color: "#ffab4f",
          },
          {
            name: "绿条",
            type: "bar",
            data: [7, 28, 6, 12, 30, 8, 5],
            barWidth: "10",
            color: "#05c985",
          },
        ],
      },
      {
        tooltip: {
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "25",
          right: "25",
          bottom: "25",
          top: "20",
          //   containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
            "星期日",
          ],
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          //   scale: true,
          splitLine: {
            show: true,
            lineStyle: {
              type: "soild",
              color: "#242e42",
            },
          },
        },
        series: [
          {
            name: "蓝条",
            type: "bar",
            data: [15, 5, 17, 20, 14, 5, 14],
            barWidth: "10",
            color: "#1f8efa",
          },
          {
            name: "黄条",
            type: "bar",
            data: [16, 21, 15, 24, 16, 32, 10],
            barWidth: "10",
            color: "#ffab4f",
          },
          {
            name: "绿条",
            type: "bar",
            data: [7, 28, 6, 12, 30, 8, 5],
            barWidth: "10",
            color: "#05c985",
          },
        ],
      },
      {
        tooltip: {
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "25",
          right: "25",
          bottom: "25",
          top: "20",
          //   containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
            "星期日",
          ],
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          //   scale: true,
          splitLine: {
            show: true,
            lineStyle: {
              type: "soild",
              color: "#242e42",
            },
          },
        },
        series: [
          {
            name: "蓝条",
            type: "bar",
            data: [15, 5, 17, 20, 14, 5, 14],
            barWidth: "10",
            color: "#1f8efa",
          },
          {
            name: "黄条",
            type: "bar",
            data: [16, 21, 15, 24, 16, 32, 10],
            barWidth: "10",
            color: "#ffab4f",
          },
          {
            name: "绿条",
            type: "bar",
            data: [7, 28, 6, 12, 30, 8, 5],
            barWidth: "10",
            color: "#05c985",
          },
        ],
      },
    ],
    [
      {
        grid: {
          left: 30,
          top: 30,
          bottom: 25,
          right: 30,
        },
        xAxis: {
          type: "category",
          boundaryGap: [false, "10%"],
          data: [
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
            "星期日",
          ],
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#242e42",
            },
          },
        },
        yAxis: {
          type: "value",
          data: [
            "5 AM",
            "7 AM",
            "9 AM",
            "11 AM",
            "1 PM",
            "3 PM",
            "5 PM",
            "7 PM",
            "9 PM",
          ],
          splitLine: {
            show: true,
            lineStyle: {
              type: "soild",
              color: "#242e42",
            },
          },
        },
        series: [
          {
            type: "line",
            data: [0, 10, 0, 10, 20, 10, 20], // 曲线图的 y 轴数据
            smooth: true,
            symbol: "none",
          },
          {
            type: "line",
            data: [0, 20, 0, 40, 10, 40, 10], // 曲线图的 y 轴数据
            smooth: true,
            symbol: "none",
          },
          {
            type: "line",
            data: [0, 20, 30, 40, 50, 20, 0], // 曲线图的 y 轴数据
            smooth: true,
            symbol: "none",
          },
          {
            type: "line",
            data: [0, 50, 30, 40, 20, 0, 10], // 曲线图的 y 轴数据
            smooth: true,
            symbol: "none",
          },
        ],
      },
      {
        grid: {
          left: 30,
          top: 30,
          bottom: 25,
          right: 30,
        },
        xAxis: {
          type: "category",
          boundaryGap: [false, "10%"],
          data: [
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
            "星期日",
          ],
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#242e42",
            },
          },
        },
        yAxis: {
          type: "value",
          data: [
            "5 AM",
            "7 AM",
            "9 AM",
            "11 AM",
            "1 PM",
            "3 PM",
            "5 PM",
            "7 PM",
            "9 PM",
          ],
          splitLine: {
            show: true,
            lineStyle: {
              type: "soild",
              color: "#242e42",
            },
          },
        },
        series: [
          {
            type: "line",
            data: [0, 10, 0, 10, 20, 10, 20], // 曲线图的 y 轴数据
            smooth: true,
            symbol: "none",
          },
          {
            type: "line",
            data: [0, 20, 0, 40, 10, 40, 10], // 曲线图的 y 轴数据
            smooth: true,
            symbol: "none",
          },
          {
            type: "line",
            data: [0, 20, 30, 40, 50, 20, 0], // 曲线图的 y 轴数据
            smooth: true,
            symbol: "none",
          },
          {
            type: "line",
            data: [0, 50, 30, 40, 20, 0, 10], // 曲线图的 y 轴数据
            smooth: true,
            symbol: "none",
          },
        ],
      },
      {
        grid: {
          left: 30,
          top: 30,
          bottom: 25,
          right: 30,
        },
        xAxis: {
          type: "category",
          boundaryGap: [false, "10%"],
          data: [
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
            "星期日",
          ],
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#242e42",
            },
          },
        },
        yAxis: {
          type: "value",
          data: [
            "5 AM",
            "7 AM",
            "9 AM",
            "11 AM",
            "1 PM",
            "3 PM",
            "5 PM",
            "7 PM",
            "9 PM",
          ],
          splitLine: {
            show: true,
            lineStyle: {
              type: "soild",
              color: "#242e42",
            },
          },
        },
        series: [
          {
            type: "line",
            data: [0, 10, 0, 10, 20, 10, 20], // 曲线图的 y 轴数据
            smooth: true,
            symbol: "none",
          },
          {
            type: "line",
            data: [0, 20, 0, 40, 10, 40, 10], // 曲线图的 y 轴数据
            smooth: true,
            symbol: "none",
          },
          {
            type: "line",
            data: [0, 20, 30, 40, 50, 20, 0], // 曲线图的 y 轴数据
            smooth: true,
            symbol: "none",
          },
          {
            type: "line",
            data: [0, 50, 30, 40, 20, 0, 10], // 曲线图的 y 轴数据
            smooth: true,
            symbol: "none",
          },
        ],
      },
      {
        grid: {
          left: 30,
          top: 30,
          bottom: 25,
          right: 30,
        },
        xAxis: {
          type: "category",
          boundaryGap: [false, "10%"],
          data: [
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
            "星期日",
          ],
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#242e42",
            },
          },
        },
        yAxis: {
          type: "value",
          data: [
            "5 AM",
            "7 AM",
            "9 AM",
            "11 AM",
            "1 PM",
            "3 PM",
            "5 PM",
            "7 PM",
            "9 PM",
          ],
          splitLine: {
            show: true,
            lineStyle: {
              type: "soild",
              color: "#242e42",
            },
          },
        },
        series: [
          {
            type: "line",
            data: [0, 10, 0, 10, 20, 10, 20], // 曲线图的 y 轴数据
            smooth: true,
            symbol: "none",
          },
          {
            type: "line",
            data: [0, 20, 0, 40, 10, 40, 10], // 曲线图的 y 轴数据
            smooth: true,
            symbol: "none",
          },
          {
            type: "line",
            data: [0, 20, 30, 40, 50, 20, 0], // 曲线图的 y 轴数据
            smooth: true,
            symbol: "none",
          },
          {
            type: "line",
            data: [0, 50, 30, 40, 20, 0, 10], // 曲线图的 y 轴数据
            smooth: true,
            symbol: "none",
          },
        ],
      },
    ],
    [
      [
        {
          legend: {
            // show:true,
            orient: "vertical",
            left: "right",
            top: "center",
            data: ["通知", "系统警告", "事件"], // 根据实际情况修改数据
            itemWidth: 10, // 修改图例图标的宽度
            itemHeight: 10,
            icon: "circle",
            itemGap: 40,
            textStyle: {
              color: "#fff",
            },
          },
          grid: {
            left: "30%",
            right: "50%",
            top: "center",
            bottom: "center",
          },
          color: ["#05c985", "#ffab4f", "#1f8efa"],
          graphic: [
            {
              type: "text",
              left: "24%",
              top: "42%",
              style: {
                text: "100",
                fontSize: 40,
                fontWeight: "bold",
                fill: "#fff",
              },
            },
            {
              type: "text",
              left: "28%",
              top: "65%",
              style: {
                text: "活动",
                fontSize: 10,
                fill: "#76899b",
              },
            },
          ],
          series: [
            {
              type: "pie",
              radius: [80, 110],
              center: ["30%", "50%"], // 控制图表位置
              label: {
                show: false, // 是否显示标签
                formatter: "{b} : {c} ({d}%)", // 标签的内容格式器
              },
              data: [
                { value: 16, name: "通知", color: "red" }, // 环形的每个扇区的数据
                { value: 22, name: "系统警告" },
                { value: 65, name: "事件" },
              ],
            },
          ],
        },
        {
          // tooltip: {},
          // backgroundColor: "#0f375f",
          animation: true,
          grid: {
            top: "25%",
            bottom: "10%", //也可设置left和right设置距离来控制图表的大小
          },
          xAxis: {
            data: ['语文','数学','英语','科学','历史'],
            axisTick: {
              show: false, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
              margin: 14,
              fontSize: 14,
              textStyle: {
                color: "#A3C0DF", //X轴文字颜色
              },
            },
          },
          yAxis: [
            {
              type: "value",
              gridIndex: 0,
              min: 0,
              max: 100,
              interval: 25,
              // splitNumber: 4,
              splitLine: {
                show: false,
               
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#11417a",
                },
              },
              axisLabel: {
                show: true,
                margin: 14,
                fontSize: 14,
                textStyle: {
                  color: "#A3C0DF", //X轴文字颜色
                },
              },
            },
          ],
          series: [
            {
              name: "主营业务",
              type: "bar",
              barWidth: 20,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    {
                      offset: 0,
                      color: "#07ecd9",
                    },
                    {
                      offset: 1,
                      color: "#034881",
                    },
                  ]),
                },
              },
              data: [20, 80, 100, 40, 34, 90, 60],
              z: 10,
              zlevel: 0,
              label: {
                show: true,
                position: "top",
                distance: 10,
                fontSize: 16,
                color: "#01fff4",
              },
            },
            {
              // 分隔
              type: "pictorialBar",
              itemStyle: {
                normal: {
                  color: "#0F375F",
                },
              },
              symbolRepeat: "fixed",
              symbolMargin: 6,
              symbol: "rect",
              symbolClip: true,
              symbolSize: [20, 2],
              symbolPosition: "start",
              symbolOffset: [0, -1],
              // symbolBoundingData: this.total,
              data: [20, 80, 100, 40, 34, 90, 60],
              width: 50,
              z: 0,
              zlevel: 1,
            },
          ],
        },
      ],
      [
        {
          series: [
            {
              type: "pie", // 指定图表类型为环形图
              radius: ["50%", "70%"], // 环形的内外半径
              label: {
                show: true, // 是否显示标签
                formatter: "{b} : {c} ({d}%)", // 标签的内容格式器
              },
              data: [
                { value: 335, name: "数据一" }, // 环形的每个扇区的数据
                { value: 310, name: "数据二" },
                { value: 234, name: "数据三" },
                { value: 135, name: "数据四" },
                { value: 1548, name: "数据五" },
              ],
            },
          ],
        },
        {
          grid: {
            left: 30,
            top: 30,
            bottom: 25,
            right: 30,
          },
          xAxis: {
            type: "category",
            boundaryGap: [false, "10%"],
            data: [
              "星期一",
              "星期二",
              "星期三",
              "星期四",
              "星期五",
              "星期六",
              "星期日",
            ],
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#242e42",
              },
            },
          },
          yAxis: {
            type: "value",
            data: [
              "5 AM",
              "7 AM",
              "9 AM",
              "11 AM",
              "1 PM",
              "3 PM",
              "5 PM",
              "7 PM",
              "9 PM",
            ],
            splitLine: {
              show: true,
              lineStyle: {
                type: "soild",
                color: "#242e42",
              },
            },
          },
          series: [
            {
              type: "line",
              data: [0, 10, 0, 10, 20, 10, 20], // 曲线图的 y 轴数据
              smooth: true,
              symbol: "none",
            },
            {
              type: "line",
              data: [0, 20, 0, 40, 10, 40, 10], // 曲线图的 y 轴数据
              smooth: true,
              symbol: "none",
            },
            {
              type: "line",
              data: [0, 20, 30, 40, 50, 20, 0], // 曲线图的 y 轴数据
              smooth: true,
              symbol: "none",
            },
            {
              type: "line",
              data: [0, 50, 30, 40, 20, 0, 10], // 曲线图的 y 轴数据
              smooth: true,
              symbol: "none",
            },
          ],
        },
      ],
      [
        {
          series: [
            {
              type: "pie", // 指定图表类型为环形图
              radius: ["50%", "70%"], // 环形的内外半径
              label: {
                show: true, // 是否显示标签
                formatter: "{b} : {c} ({d}%)", // 标签的内容格式器
              },
              data: [
                { value: 335, name: "数据一" }, // 环形的每个扇区的数据
                { value: 310, name: "数据二" },
                { value: 234, name: "数据三" },
                { value: 135, name: "数据四" },
                { value: 1548, name: "数据五" },
              ],
            },
          ],
        },
        {
          grid: {
            left: 30,
            top: 30,
            bottom: 25,
            right: 30,
          },
          xAxis: {
            type: "category",
            boundaryGap: [false, "10%"],
            data: [
              "星期一",
              "星期二",
              "星期三",
              "星期四",
              "星期五",
              "星期六",
              "星期日",
            ],
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#242e42",
              },
            },
          },
          yAxis: {
            type: "value",
            data: [
              "5 AM",
              "7 AM",
              "9 AM",
              "11 AM",
              "1 PM",
              "3 PM",
              "5 PM",
              "7 PM",
              "9 PM",
            ],
            splitLine: {
              show: true,
              lineStyle: {
                type: "soild",
                color: "#242e42",
              },
            },
          },
          series: [
            {
              type: "line",
              data: [0, 10, 0, 10, 20, 10, 20], // 曲线图的 y 轴数据
              smooth: true,
              symbol: "none",
            },
            {
              type: "line",
              data: [0, 20, 0, 40, 10, 40, 10], // 曲线图的 y 轴数据
              smooth: true,
              symbol: "none",
            },
            {
              type: "line",
              data: [0, 20, 30, 40, 50, 20, 0], // 曲线图的 y 轴数据
              smooth: true,
              symbol: "none",
            },
            {
              type: "line",
              data: [0, 50, 30, 40, 20, 0, 10], // 曲线图的 y 轴数据
              smooth: true,
              symbol: "none",
            },
          ],
        },
      ],
      [
        {
          series: [
            {
              type: "pie", // 指定图表类型为环形图
              radius: ["50%", "70%"], // 环形的内外半径
              label: {
                show: true, // 是否显示标签
                formatter: "{b} : {c} ({d}%)", // 标签的内容格式器
              },
              data: [
                { value: 335, name: "数据一" }, // 环形的每个扇区的数据
                { value: 310, name: "数据二" },
                { value: 234, name: "数据三" },
                { value: 135, name: "数据四" },
                { value: 1548, name: "数据五" },
              ],
            },
          ],
        },
        {
          grid: {
            left: 30,
            top: 30,
            bottom: 25,
            right: 30,
          },
          xAxis: {
            type: "category",
            boundaryGap: [false, "10%"],
            data: [
              "星期一",
              "星期二",
              "星期三",
              "星期四",
              "星期五",
              "星期六",
              "星期日",
            ],
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#242e42",
              },
            },
          },
          yAxis: {
            type: "value",
            data: [
              "5 AM",
              "7 AM",
              "9 AM",
              "11 AM",
              "1 PM",
              "3 PM",
              "5 PM",
              "7 PM",
              "9 PM",
            ],
            splitLine: {
              show: true,
              lineStyle: {
                type: "soild",
                color: "#242e42",
              },
            },
          },
          series: [
            {
              type: "line",
              data: [0, 10, 0, 10, 20, 10, 20], // 曲线图的 y 轴数据
              smooth: true,
              symbol: "none",
            },
            {
              type: "line",
              data: [0, 20, 0, 40, 10, 40, 10], // 曲线图的 y 轴数据
              smooth: true,
              symbol: "none",
            },
            {
              type: "line",
              data: [0, 20, 30, 40, 50, 20, 0], // 曲线图的 y 轴数据
              smooth: true,
              symbol: "none",
            },
            {
              type: "line",
              data: [0, 50, 30, 40, 20, 0, 10], // 曲线图的 y 轴数据
              smooth: true,
              symbol: "none",
            },
          ],
        },
      ],
    ],
  ]);

  //   bottom列表
  let [btmLs, setBtmLs] = useState([
    {
      id: 1,
      icon: WarningFilled,
      time: "2023-02-01 11:12:13",
      title: "后院传感器检测到一些活动",
      color: "#ffab4f",
    },
    {
      id: 2,
      icon: InfoCircleFilled,
      time: "2023-02-01 11:12:14",
      title: "该系统的存储空间为89%,请升级您的计划得以腾出一些空间",
      color: "#1f8efa",
    },
    {
      id: 3,
      icon: SettingFilled,
      time: "2023-02-01 11:12:14",
      title: "每日系统备份已完成并上传至服务器",
      color: "#05c985",
    },
    {
      id: 4,
      icon: WarningFilled,
      time: "2023-02-01 11:12:13",
      title: "后院传感器检测到一些活动",
      color: "#ffab4f",
    },
    {
      id: 5,
      icon: InfoCircleFilled,
      time: "2023-02-01 11:12:14",
      title: "该系统的存储空间为89%,请升级您的计划得以腾出一些空间",
      color: "#1f8efa",
    },
    {
      id: 6,
      icon: SettingFilled,
      time: "2023-02-01 11:12:14",
      title: "每日系统备份已完成并上传至服务器",
      color: "#05c985",
    },
    {
      id: 7,
      icon: WarningFilled,
      time: "2023-02-01 11:12:13",
      title: "后院传感器检测到一些活动",
      color: "#ffab4f",
    },
    {
      id: 8,
      icon: InfoCircleFilled,
      time: "2023-02-01 11:12:14",
      title: "该系统的存储空间为89%,请升级您的计划得以腾出一些空间",
      color: "#1f8efa",
    },
    {
      id: 9,
      icon: SettingFilled,
      time: "2023-02-01 11:12:14",
      title: "每日系统备份已完成并上传至服务器",
      color: "#05c985",
    },
  ]);

  return (
    <div className="history">
      <TitleBar title="历史数据" Icon={PieChartOutlined}></TitleBar>
      <div className="tory">
        <div className="histop">
          <div className="histitle">活动历史</div>
          <div className="changeEc">
            {changeEc.map((item: any, index: number) => {
              return (
                <item.icon
                  onClick={() => changeAc(index)}
                  className="ecIcons"
                  key={item.id}
                  style={
                    nowid === index
                      ? { color: "#1f8efa", fontSize: "20px", margin: "0 10px" }
                      : { color: "#657d95", fontSize: "20px", margin: "0 10px" }
                  }
                />
              );
            })}
          </div>
          <div className="changeDate">
            {changeDate.map((item: any, index: number) => {
              return (
                <div
                  key={item.id}
                  className={dateid === index ? "dateAc" : ""}
                  onClick={() => changedateid(index)}
                >
                  {item.title}
                </div>
              );
            })}
          </div>
        </div>
        <div className="hismain">
          {nowid !== 2 && (
            <EChartsReact
              option={options}
              ref={echartsRef}
              style={{ width: "100%", height: "100%" }}
            />
          )}
          {nowid === 2 && (
            <div style={{ width: "100%", height: "100%", display: "flex" }}>
              <EChartsReact
                option={opLs[2][0][0]}
                ref={echartsRef}
                style={{ width: "50%", height: "100%" }}
              />
              <EChartsReact
                option={opLs[2][0][1]}
                ref={echartsRef2}
                style={{ width: "50%", height: "100%" }}
              />
            </div>
          )}
        </div>
        <div className="hisbottom">
          {btmLs.map((item: any) => {
            return (
              <div className="hisbtmitem" key={item.id}>
                <div className="btmcolor">
                  <item.icon style={{ color: item.color, fontSize: "20px" }} />
                </div>
                <div className="btmtime">{item.time}</div>
                <div className="btmtitle">{item.title}</div>
                <MoreOutlined />
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

export default History;
